<section id="faq">
    <div class="container">
        <div class="row">   
            <div class="col-lg-12 column12">         
                <div id="Bread">
                    <ol class="breadcrumb">
                        <li><a href="<?php echo SITE_URL; ?><">Home</a></li>
                        <li class="active">Faq</li>
                    </ol>
                </div><!--bread-->
            </div>
        </div>
        <!--
                <div class="row">
                  <div class="col-lg-7 column7 col-md-7 col-sm-7">
                    <div class="head-input">
                      <h1>FAQ</h1>
                      <span class="form-group">
                        <input type="text" placeholder="Type Your Question Here.." class="form-control">
                      </span>
                    </div>
                    <div class="col-lg-1 column1"></div>
                    <div class="col-lg-4 column4"></div>
                  </div>
                </div>-->

        <div class="row">
            <div class="col-lg-7 column7 col-md-7 col-sm-7">

                <div class="panel-group" id="accordion">
                    <?php
                    $i = 1;
                    foreach ($model as $modelValue) {
                        ?>

                        <div class="panel panel-default ">
                            <div class="panel-heading <?php #echo ($i == 1) ? 'activebg' : ''  ?>">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion" href="#colspan<?php echo $i; ?>">
                                        <?php echo $modelValue->question; ?>
                                    </a>
                                </h4>
                            </div>
                            <div id="colspan<?php echo $i; ?>" class="panel-collapse collapse in <?php echo ($i == 1) ? 'showaccordion' : '' ?>">
                                <div class="panel-body">
                                    <?php echo $modelValue->answer; ?>
                                </div>
                            </div>
                        </div>
                        <?php
                        $i++;
                    }
                    ?>

                </div>
            </div>
            <div class="col-lg-1 col-sm-1 col-md-1 column1"></div>
            <div class="col-lg-4 col-sm-4 col-md-4 column4 padding-zero-left">
                <div id="form-element">
                    <h3>Didn't Find What you were looking for?</h3>
                    <small>Mail Us Your Query!</small>
                    <div class="gap"></div>
                    <?php
                    $form = $this->beginWidget('GxActiveForm', array(
                        'id' => 'contactus-form',
                        'enableClientValidation' => true,
                        'clientOptions' => array(
                            'validateOnSubmit' => true,
                            'validateOnChange' => true,
                            'enableAjaxValidation' => true,
                        ),
                        'htmlOptions' => array(
                            'class' => 'form',
                        ),
                    ));
                    ?>
                    <div class="form-group">
                        <label for="name">Name:*</label>
                        <?php echo $form->textField($conatctus, 'name', array('maxlength' => 45, 'class' => 'form-control inputtxt', 'placeholder' => 'Name*')); ?>
                        <?php echo $form->error($conatctus, 'name'); ?>   
                    </div>
                    <div class="form-group">
                        <label for="mail">E-mail:*</label>
                        <?php echo $form->textField($conatctus, 'email', array('class' => 'form-control inputtxt', 'placeholder' => 'Email*')); ?>
                        <?php echo $form->error($conatctus, 'email'); ?> 
                    </div>
                    <div class="form-group">
                        <label for="msg">Message:*</label>
                        <?php echo $form->hiddenField($conatctus, 'subject', array('class' => 'form-control inputtxt', 'placeholder' => 'Subject*', 'value' => 'Mail For suggestion')); ?>
                        <?php echo $form->error($conatctus, 'subject'); ?> 

                        <?php echo $form->textArea($conatctus, 'message', array('class' => 'form-control txtarea', 'placeholder' => 'Message...')); ?>
                        <?php echo $form->error($conatctus, 'message'); ?>
                    </div>

                    <div class="button">
                        <div id="contactusloder" style="display: none"><img src="<?php echo ThemePath(); ?>/images/myskill.gif"></img></div> 
                        <p class="alignR remmarginB clearfix">
                            <?php
                            echo CHtml::ajaxSubmitButton('Submit', CHtml::normalizeUrl(array('site/contact')), array(
                                'dataType' => 'json',
                                'type' => 'post',
                                'success' => 'function(data) {
                        $("#contactusloder").hide();  
						 if(data.status=="success"){
                        $("#contactusResult").show();
                        $("#contactusResult").html("Thank you for contacting us. We will respond to you as soon as possible.");
						$(".alignR").html("&nbsp;");
                                                 $("#contactus-form")[0].reset();
                        } else{
                         $.each(data, function(key, val) {   
                        $("#"+key+"_em_").text(val);                                                    
                        $("#"+key+"_em_").show();
                        });
                        }
                    }',
                                'beforeSend' => 'function(){                        
                           $("#contactusloder").show();
                      }'
                                    ), array('class' => 'pull-right',));
                            ?>
                        </p>
                        <p id="contactusResult" style="font-size: 13px;color: #000;display: none;"></p>
                    </div>
                    <?php
                    $this->endWidget();
                    ?>

                </div>
            </div>
        </div>
        <div class="gap"></div>
        <div class="gap1"></div> 
    </div><!-- Main Container Class -->
    <div class="gap"></div>

</section>
<script>
    $(function() {
        $('#accordion .in').collapse('hide');
        //$('.showaccordion').show();
        var transition = false;
        var $active = true;

        $('.panel-title > a').click(function(e) {
            e.preventDefault();
        });

        $('#accordion').on('show.bs.collapse', function() {
            //$('#colspan1').addclass('collapse');
            // $('#colspan1').removeClass('showaccordion');
            if ($active) {
                $('#accordion .in').collapse('hide');

            }
        });

        $('#accordion').on('hidden.bs.collapse', function() {
            $('#accordion .in').collapse('hide');
            if (transition) {
                transition = false;
                $('.panel-collapse').collapse('show');
            }
        });

        $('.collapse-init').on('click', function() {
            $('.collapse-init').prop('disabled', 'true');
            if (!$active) {
                $active = true;
                $('.panel-title > a').attr('data-toggle', 'collapse');
                $('.panel-collapse').collapse('hide');
                $(this).html('Click to disable accordion behavior');
            } else {
                $active = false;
                if ($('.panel-collapse.in').length) {
                    transition = true;
                    $('.panel-collapse.in').collapse('hide');
                }
                else {
                    $('.panel-collapse').collapse('show');
                }
                $('.panel-title > a').attr('data-toggle', '');
                $(this).html('Click to enable accordion behavior');
            }
            setTimeout(function() {
                $('.collapse-init').prop('disabled', '');
            }, 800);
        });
    });
</script>